<!--非响应式变量与侦听器-->
<script setup lang="js">
import { computed, reactive, ref, watch, watchEffect } from 'vue'

const styleData = [
  {
    type: 'primary',
    shape: 'square',
  },
  {
    type: 'info',
    shape: 'round',
  },
  {
    type: 'success',
    shape: 'square',
  },
  {
    type: 'warning',
    shape: 'round',
  },
]

let count = 0
const computedFilter = computed(() => {
  // count的值发生变动无法被侦听
  // 计算属性和watchEffect()均是立即执行模式，初始化完毕后会立即执行一次
  return styleData[count % styleData.length]
})

const watchFilter = ref()
// 初始化由ref([])修改成ref()
const countReactive = reactive({
  count: 0,
})

watch(() => count, () => {
  // count变量是非响应式变量，不能用于侦听传参
  // 使用匿名的get()函数，强制使得传参合规，但是依然无法被侦听
  // watch()传参是计算属性、Ref变量、Reactive变量或者由它们构成的数组
  // watch()传参还可以是匿名的get()函数，返回的值作为侦听源
  // 此时可以监听响应式变量的某个字段
  watchFilter.value = styleData[count % styleData.length]
})

watch(() => countReactive.count, () => {
  // 虽然countReactive.count字段值是基本变量，不是响应式的
  // 但是countReactive是响应式的，可通过匿名get()函数返回响应式变量的字段实现侦听
  // 使用数组，可侦听多个数据源，数组元素是监听的数据源
  watchFilter.value = styleData[countReactive.count % styleData.length]
})

const watchEffectFilter = ref()
// 初始化由ref([])修改成ref()
watchEffect(() => {
  // count值发生变动无法被侦听
  watchEffectFilter.value = styleData[count % styleData.length]
})
</script>

<template>
  <div class="q-pa-6">
    <q-banner class="bg-purple-4 text-white text-center mb-8">
      <p class="text-h4">陈一非 23211860123</p>
    </q-banner>

    <div class="bg-white rounded-lg shadow p-4 mb-6">
      <h3 class="text-xl text-center font-bold mb-4">作业十五 - 非响应式变量与侦听器</h3>
      <div class="row justify-center gap-4">
        <q-btn @click="count++" color="primary" rounded-full label="CountUp (非响应式)" />
        <q-btn @click="countReactive.count++" color="secondary" rounded-full label="CountReactiveUp (响应式)" />
      </div>
      
      <div class="row justify-center mt-4">
        <div class="text-center">
          <p class="text-lg mb-1"><strong>Count:</strong> {{ count }}</p>
          <p class="text-lg"><strong>CountReactive:</strong> {{ countReactive.count }}</p>
        </div>
      </div>
    </div>

    <q-card class="q-ma-auto" style="max-width: 600px;">
      <q-card-section>
        <p class="text-lg mb-4"><strong>计算属性过滤结果：</strong>{{ computedFilter }}</p>
        <p class="text-lg mb-4"><strong>watch()过滤结果：</strong>{{ watchFilter }}</p>
        <p class="text-lg"><strong>watchEffect()过滤结果：</strong>{{ watchEffectFilter }}</p>
      </q-card-section>
    </q-card>
  </div>
</template>

<style scoped>

</style>
